<!-- <template>
		<el-date-picker class="formDate" v-if="item.mode === 'D'" :disabled="true" type="datetime"
			value-format="YYYY-MM-DD HH:mm:ss" :placeholder="!item.form ? '' : item.form.placeholder" />
		<div v-else>
			<el-button @click="addItem">+</el-button>
			<div v-for="(item, index) of localDataList" :key="index">
				<el-date-picker class="formDate" value-format="YYYY-MM-DD HH:mm:ss" type="datetime"
					v-model="item.form.props.value" :disabled="item.form.perm === 'R'" :placeholder="item.form.placeholder" />
				<el-button @click="deleteItem(index)">-</el-button>
			</div>
		</div>
</template>
<script lang="ts" setup>
import { forEach } from 'lodash';
import { defineExpose } from 'vue';

let props = defineProps({
	value: {
		type: Array,
		default: [
			{
				mode: 'D',
				form: {},
			}
		],
	},
	mode: {
		type: String,
		default: 'D',
	},

	form: {
		type: Object,
		default: () => { },
	},
});

const localDataList = ref(props.value);

const addItem = () => {
	console.log("addItem1");
	localDataList.value.push({
		mode: 'V',
		form: {
			placeholder: "日期",
			perm: 'W',
			props: { value: "" }
		}
	});
};
const deleteItem = (index: number) => {
	localDataList.value.splice(index, 1);
};

watch(() => props.value, (newValue) => {
	localDataList.value = newValue;
}, { deep: true });

const { proxy } = getCurrentInstance();
const getValidateRule = () => {
	var checkConfig = (rule: any, value: any, callback: any) => {
		return callback();
	};
	let ruleArray = [
		{
			validator: checkConfig,
			trigger: 'blur',
		}
	];
	return ruleArray;
}
defineExpose({ getValidateRule });
</script>
<style scoped>
.date-time-item {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.formDate {
	flex-grow: 1;
	margin-right: 10px;
}

.delete-button {
	flex-shrink: 0;
}

:deep(.formDate div.el-input__wrapper) {
	width: 100% !important;
}

:deep(.formDate) {
	width: 100% !important;
}
</style> -->


<template>
	<!-- <div>
		<el-select style="width: 100%" v-if="mode === 'D'" :disabled="true" :placeholder="!form ? '' : form.placeholder"
			size="large">
		</el-select>
		<el-select v-else style="width: 100%" multiple collapse-tags collapse-tags-tooltip v-model="formValue"
			:disabled="form.perm === 'R'" :placeholder="form.placeholder" size="large">
			<el-option v-for="item in form.props.options" :key="item.key" :label="item.value" :value="item.key" />
		</el-select>
	</div> -->
	<el-date-picker class="formDate" v-if="props.mode === 'D'" :disabled="true" type="datetime"
		value-format="YYYY-MM-DD HH:mm:ss" :placeholder="!props.form ? '' : props.form.placeholder" />
	<div v-else>
		<el-button @click="addItem">+</el-button>
		<div v-for="(item, index) of formValue" :key="index">
			<el-date-picker class="formDate" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" v-model="item.value"
				:disabled="props.form.perm === 'R'" :placeholder="props.form.placeholder" />
			<el-button @click="deleteItem(index)">-</el-button>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { defineExpose, computed } from "vue";
// var dateTimeList = computed({
// 	get() {
// 		let value = props.form.props.value;
// 		//返回是数组
// 		//let ret = (value && value.length > 0) ? (value.map(res => res.key)) : undefined;
// 		let ret = (value && value.length > 0) ? value : [];
// 		console.log(ret, 'dateTimeList for model')
// 		return ret;

// 	}
// });
var formValue = computed({
	get() {
		let value = props.form.props.value;
		//返回是数组
		//let ret = (value && value.length > 0) ? (value.map(res => res.value)) : undefined;
		let ret = (value && value.length > 0) ? value : [];
		console.log(ret, 'formValue')
		return ret;

	},
	set(t) {
		//let filterElement = props.form.props.options.filter(res => t.indexOf(res.key) >= 0);
		//props.form.props.value = filterElement
		console.log(t, 'formValue')
		if (t) {
			props.form.props.value = t
		} else {
			props.form.props.value = []
		}
	}
})
let props = defineProps({
	mode: {
		type: String,
		default: 'D'
	},
	form: {
		type: Object, default: () => {
			return { value: [] }
		}
	}
});
const addItem = () => {
	console.log("addItem1");
	if (!props.form.props.value) {
		props.form.props.value = []
	}
	props.form.props.value.push({ value: '' });
};
const deleteItem = (index: number) => {
	props.form.props.value.splice(index, 1);
};

const { proxy } = getCurrentInstance();
const getValidateRule = () => {
	var item = props.form;
	var checkConfig = (rule: any, value: any, callback: any) => {
		if (item.required) {
			if (value == undefined || value.length == 0) {
				return callback(new Error("请选择" + item.name))
			}
		}
		if (value == undefined) {
			return callback()
		}


		return callback()


	}
	let ruleArray = [{
		validator: checkConfig, trigger: 'change'
	}];
	if (item.required) {
		ruleArray.push(
			{ required: true, message: '请选择' + item.name, trigger: 'change' }
		)
	}
	return ruleArray


}
defineExpose({ getValidateRule });

</script>
